/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-01-09 01:09:00
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import FabricText from "@/myFabric/FabricText";
import { Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import leftAilgnSVG from "./leftAilgn.svg";
import leftAilgn_activeSVG from "./leftAilgn_active.svg";
import centerAlignSVG from "./centerAlign.svg";
import centerAlign_activeSVG from "./centerAlign_active.svg";
import rightAlignSVG from "./rightAlign.svg";
import rightAlign_activeSVG from "./rightAlign_active.svg";
import styles from "./toolTextAlign.module.less";
import nameNumStore from "@/editorComponent/LeftMenu/NameNum/nameNumStore";


interface Iprops {
}

// 字体对齐方式
export default function ToolTextAlign() {

  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [textAlign, setTextAlign] = useState("left");

  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    const { step } = nameNumStore;
    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "i-text") {
      const { textAlign = "left" } = activeObject as FabricText;
      const lockNameNum = (["name", "num"].includes(activeObject.name || "") && step === 3);
      setTextAlign(textAlign);
      setVisible(true);
      setDisable(lock || lockNameNum);
    } else {
      setVisible(false);
    }
  }), []);

  return (
    <>
      <Tooltip
        title="左对齐"
        placement="top"
        mouseLeaveDelay={0}
        mouseEnterDelay={0.5}
      >
        {/* 左对齐 */}
        <img
          alt=""
          onClick={() => {
            designEditor.setTextAlign("left");
            setTextAlign("left");
          }}
          className={clsx(styles.toolTextAlign, visible && styles.visible, textAlign === "left" && styles.active, disable && styles.disable)}
          src={textAlign === "left" ? leftAilgn_activeSVG : leftAilgnSVG}
        />
      </Tooltip>

      <Tooltip
        title="居中对齐"
        placement="top"
        mouseLeaveDelay={0}
        mouseEnterDelay={0.5}
      >
        {/* 居中对齐 */}
        <img
          alt=""
          onClick={() => {
            designEditor.setTextAlign("center");
            setTextAlign("center");
          }}
          className={clsx(styles.toolTextAlign, visible && styles.visible, disable && styles.disable)}
          src={textAlign === "center" ? centerAlign_activeSVG : centerAlignSVG}
        />
      </Tooltip>

      <Tooltip
        title="右对齐"
        placement="top"
        mouseLeaveDelay={0}
        mouseEnterDelay={0.5}
      >
        {/* 右对齐 */}
        <img
          alt=""
          onClick={() => {
            designEditor.setTextAlign("right");
            setTextAlign("right");
          }}
          className={clsx(styles.toolTextAlign, visible && styles.visible, disable && styles.disable)}
          src={textAlign === "right" ? rightAlign_activeSVG : rightAlignSVG}
        />
      </Tooltip >
    </>
  );

}